.form-rtl {
  .setup-bg,
  .button-icon {
    transform: scaleX(-1) !important;
  }

  textarea::placeholder,
  input::placeholder {
    font-family: Cairo !important;
  }
}

.form-container {
  display: flex;
  flex-direction: column;
  width: 100%;

  .form-main {
    width: 900px;
    margin: 0 auto;
    height: auto;

    /* setup */
    .form-setup {
      padding-top: 110px;
      display: flex;
      justify-content: space-between;

      .setup-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 150px;

        &:first-child {
          .setup-bg {
            width: 105%;
            transform: translateX(5px);
          }
        }

        &:last-child {
          .setup-bg {
            width: 105%;
            transform: translateX(-5px);
          }
        }

        .setup-bg {
          position: absolute;
          width: 109%;
          height: 100%;
          z-index: 1;
          filter: drop-shadow(0 4px 70px rgba(31, 68, 101, 10%));
        }

        .setup-icon {
          width: 78px;
          height: 78px;
          z-index: 2;
        }

        .setup-title {
          white-space: nowrap;
          margin-top: 16px;
          color: #c6c6c6;
          font-family: Avenir;
          font-size: 16px;
          line-height: 16px;
          font-weight: 400;
          z-index: 2;
        }

        .setup-title-complete {
          font-weight: 800;
          color: #9db2bf;
        }
      }
    }

    /* content */
    .form-content {
      /* public */
      .form-title-h2 {
        color: #16202d;
        font-family: Roboto Condensed;
        font-size: 30px;
        font-weight: 700;
        line-height: 36px;
        margin: 70px 0 0;
      }

      .form-title-extra {
        color: #8c8c8c;
        font-family: Avenir;
        font-size: 14px;
        font-weight: 350;
        display: block;
      }

      .form-alert {
        display: flex;
        padding: 6px 8px;
        align-items: center;
        gap: 6px;
        border-radius: 4px;
        background: #fff8e8;
        margin: 15px 0 40px;
        width: fit-content;

        .alert-icon {
          width: 18px;
          height: 18px;
        }

        .alert-text {
          color: #ffb320;
          font-family: Avenir;
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 20px;
        }
      }

      :global(.ant-form) {
        :global(.ant-form-item) {
          margin-bottom: 22px;

          :global(.ant-input) {
            height: 46px;
            padding: 0 16px;
          }

          :global(textarea) {
            min-height: 110px !important;
            max-height: 300px !important;
            padding: 10px 16px !important;
          }

          :global(.ant-picker) {
            height: 46px;
            padding: 0 16px;

            :global(input::placeholder) {
              color: #a3a8a8;
              font-family: Avenir;
              font-size: 14px;
            }
          }
        }

        :global(.ant-select) {
          height: 46px;
          align-items: center;

          :global(.ant-select-selector) {
            padding: 0 16px;

            :global(.ant-select-selection-search) {
              inset-inline-start: 16px;
              inset-inline-end: 16px;

              // :global(.ant-select-selection-search-input) {
              // height: 46px;
              // }
            }
          }
        }

        :global(.ant-input::placeholder) {
          color: #a3a8a8;
          font-family: Avenir;
          font-size: 14px;
        }

        :global(.ant-select-selection-placeholder) {
          color: #a3a8a8;
          font-family: Avenir;
          font-size: 14px;
        }

        :global(.ant-form-item-explain-error) {
          margin-top: 5px;
        }
      }

      .form-item-label,
      .form-item-label-small {
        color: #16202d;
        font-family: Roboto Condensed;
        font-weight: 700;
        margin-bottom: 6px;

        .form-item-label-required {
          color: #e93323;
          margin: 0 5px;
          font-family: Roboto Condensed;
        }
      }

      .form-item-label {
        font-size: 18px;
      }

      .form-item-label-small {
        font-size: 16px;
      }

      /* form-button */
      .form-button {
        width: 100%;
        margin: 40px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .form-button-pre,
      .form-button-next,
      .form-button-disabled,
      .form-button-upload {
        display: flex;
        padding: 15px 34px;
        align-items: center;
        gap: 8px;
        border-radius: 100px;
        width: fit-content;
        cursor: pointer;

        .button-icon {
          width: 14px;
          height: 12px;
        }

        .button-text {
          font-family: Roboto Condensed;
          font-size: 18px;
          font-weight: 700;
        }
      }

      .form-button-pre {
        border: 1px solid #44c5e4;

        .button-text {
          color: #44c5e4;
        }

        &:hover {
          border: 1px solid #6edaf0;

          .button-text {
            color: #6edaf0;
          }
        }
      }

      .form-button-next {
        background: #44c5e4;

        .button-text {
          color: #fff;
        }

        &:hover {
          background: #6edaf0;
        }
      }

      .form-button-disabled {
        background: #c6c6c6;
        cursor: not-allowed;

        .button-text {
          color: #fff;
        }
      }

      .form-button-upload {
        border: 1px solid #44c5e4;
        padding: 10px 18px;

        .button-text {
          color: #44c5e4;
          font-weight: 400;
        }
      }

      /* persona-details */
      .form-personal {
        .form-mobile {
          :global(.ant-form-item) {
            margin-bottom: 10px;

            :global(.ant-form-item-explain-error) {
              margin-bottom: 5px;
            }
          }

          .form-mobile-area {
            display: flex;
            padding: 0 18px;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            height: 46px;
            border: 1px solid #ebeef5;
            background: #f5f7fa;

            .area-text {
              color: #c6c6c6;
              font-size: 14px;
            }
          }
        }
      }

      /* verification */
      .form-verification {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .form-verification-code {
          display: flex;
          margin: 16px 0;
          direction: ltr !important;
          gap: 20px;

          .form-verification-input {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 68px !important;
            width: 65px !important;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            text-align: center;
            color: #3f474b;
            font-family: Roboto Condensed !important;
            font-size: 50px;
            font-weight: 700;
            caret-color: #3f474b;
          }
        }

        .form-verification-resend {
          display: flex;
          padding: 10px 22px;
          align-items: center;
          border-radius: 100px;
          background: #44c5e4;
          cursor: pointer;

          span {
            color: #fff;
            font-family: Avenir;
            font-size: 16px;
          }
        }
      }

      /* complaint */
      .form-complaint {
        .form-complaint-line {
          width: 97%;
          border-bottom: 2px dashed #d6dce0;
          margin-bottom: 40px;
        }

        .form-complaint-witnesses {
          margin-bottom: 20px;

          .form-complaint-witnesses-list {
            display: flex;
            align-items: center;
            gap: 24px;

            :global(.ant-form-item) {
              margin-bottom: 5px;
              width: 265px;
            }
          }
        }

        .form-item-label {
          margin-bottom: 5px;
        }

        .form-item-label-small {
          margin: 15px 0 4px;
        }

        .form-complaint-witnesses-add {
          color: #44c5e4;
          font-family: Tajawal;
          font-size: 16px;
          font-weight: 700;
          cursor: pointer;
        }

        .form-complaint-witnesses-del {
          margin-top: 30px;
          width: 24px;
          height: 24px;
          cursor: pointer;
        }

        .form-complaint-witnesses-del-h5 {
          display: none;
        }

        .form-complaint-file {
          display: flex;
          flex-wrap: wrap;
          gap: 16px;
          margin: 10px 0 16px;

          .form-complaint-file-item {
            direction: ltr;
            padding-right: 10px;
            gap: 12px;
            border-radius: 6px;
            background: rgba(214, 220, 224, 30%);
            display: flex;
            align-items: center;
            justify-content: space-between;

            .file-icon {
              width: 48px;
              height: 48px;
            }

            .file-text {
              line-height: 30px;
              height: 30px;
              color: #464646;
              font-family: Avenir;
              font-size: 14px;
              border-right: 1px solid #d6dce0;
              padding-right: 12px;
            }

            .file-close {
              cursor: pointer;
              width: 25px;
              height: 25px;
            }
          }
        }
      }

      /* confirm */
      .form-confirm {
        .form-title-h2 {
          margin-bottom: 40px;
        }

        .form-confirm-line {
          margin-bottom: 40px;
          width: 100%;
          border-bottom: 2px dashed #d6dce0;
        }

        .form-item-label {
          margin-bottom: 22px;
        }

        .form-confirm-descriptions {
          margin-bottom: 35px;
          display: flex;
          flex-direction: column;
          gap: 16px;

          .form-descriptions-wrap {
            display: flex;
            gap: 10px;
          }

          .form-descriptions-item,
          .form-descriptions-item-column,
          .form-descriptions-item-hundred {
            display: flex;
            align-items: flex-start;

            .form-descriptions-label {
              color: #464646;
              font-family: Avenir;
              font-size: 14px;
              line-height: 21px;
              font-style: normal;
              font-weight: 400;
              width: 150px;
              flex-shrink: 0;
            }

            .form-descriptions-value {
              color: #16202d;
              font-family: Avenir;
              font-size: 14px;
              font-weight: 800;
              line-height: 21px;
              overflow-wrap: anywhere;
              word-break: break-word;

              .form-confirm-witnesses {
                display: flex;
                flex-direction: column;
                gap: 8px;
              }

              .form-confirm-file {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
                margin: 5px 0 10px;

                .form-confirm-file-item {
                  padding-right: 20px;
                  direction: ltr;
                  gap: 15px;
                  border-radius: 6px;
                  background: rgba(214, 220, 224, 30%);
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .file-icon {
                    width: 48px;
                    height: 48px;
                  }

                  .file-text {
                    line-height: 30px;
                    height: 30px;
                    color: #464646;
                    font-family: Avenir;
                    font-size: 14px;
                    font-weight: normal;
                  }
                }
              }
            }
          }

          .form-descriptions-item {
            width: 50%;
          }

          .form-descriptions-item-column {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
          }

          .form-descriptions-item-hundred {
            width: 100%;
          }
        }

        :global(.ant-checkbox-wrapper) {
          gap: 10px;
          margin-bottom: 10px;

          :global(span) {
            color: #16202d;
            font-family: Avenir;
            font-size: 14px;
            font-weight: 800;
            line-height: 25px;
          }
        }
      }

      /* Thank You */
      .form-complete {
        margin-top: 190px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .complete-icon {
          width: 200px;
          height: 200px;
        }

        .complete-title {
          color: #16202d;
          text-align: center;
          font-family: Roboto Condensed;
          font-size: 60px;
          font-style: normal;
          font-weight: 700;
          line-height: 72px;
          margin: 32px 0;
        }

        .complete-article {
          width: 80%;
          text-align: center;
          color: rgba(0, 0, 0, 50%);
          font-family: Avenir;
          font-size: 18px;
          font-style: normal;
          font-weight: 350;
          line-height: 27px;
        }
      }
    }
  }
}

@media screen and (max-width: 996px) {
  .form-container {
    .form-main {
      width: 90%;

      /* setup */
      .form-setup {
        padding-top: 90px;

        .setup-item {
          height: 80px;

          .setup-icon {
            width: 45px;
            height: 45px;
          }

          .setup-title {
            display: none;
          }
        }
      }

      .form-content {
        .form-title-h2 {
          margin: 40px 0 0;
        }

        .form-alert {
          display: flex;
          padding: 15px;
          gap: 10px;

          .alert-icon {
            width: 30px;
            height: 30px;
          }
        }

        .form-title-extra {
          line-height: 20px;
        }

        /* verification */
        .form-verification {
          .form-title-extra {
            text-align: center;
            width: 90%;
          }
        }

        /* complaint */
        .form-complaint {
          .form-complaint-witnesses {
            .form-complaint-witnesses-list {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 0;

              :global(.ant-form-item) {
                margin-bottom: 0;
                width: 100%;
              }
            }

            .form-complaint-witnesses-del {
              display: none;
            }

            .form-witnesses-line {
              width: 97%;
              border-bottom: 2px dashed #d6dce0;
              margin: 30px 0 15px;
            }

            .form-complaint-witnesses-del-h5 {
              margin-top: 20px;
              width: 100%;
              border: 1px solid #f53f3f;
              border-radius: 100px;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 12px 0;
              cursor: pointer;

              span {
                color: #f53f3f;
                font-family: Roboto Condensed;
                font-size: 18px;
                font-weight: 700;
              }
            }
          }
        }

        /* confirm */
        .form-confirm {
          .form-descriptions-item-phone {
            display: flex;
            flex-direction: column;

            .form-descriptions-label {
              width: 100% !important;
              margin-bottom: 10px;
            }
          }

          .form-descriptions-item {
            width: 100% !important;
          }

          .form-descriptions-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
          }
        }

        /* Thank You */
        .form-complete {
          .complete-icon {
            width: 120px;
            height: 120px;
          }

          .complete-title {
            font-size: 40px;
            line-height: 48px;
            margin: 24px 0;
          }

          .complete-article {
            width: 80%;
            font-size: 16px;
            line-height: 24px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 520px) {
  .form-container {
    .form-main {
      .form-content {
        /* verification */
        .form-verification {
          .form-verification-code {
            gap: 3%;

            .form-verification-input {
              width: 100% !important;
              font-size: 45px;
            }
          }
        }
      }
    }
  }
}
